import 'package:flutter/material.dart';

//🎪 案例 4：卡片堆叠效果
void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: StackCardPageView(),
    );
  }
}

// 🎪 案例 4：卡片堆叠效果
// 实现类似卡片堆叠的视觉效果，非当前页面部分可见。
class StackCardPageView extends StatefulWidget {
  @override
  _StackCardPageViewState createState() => _StackCardPageViewState();
}

class _StackCardPageViewState extends State<StackCardPageView> {
  final PageController _pageController = PageController(viewportFraction: 0.8);
  double _currentPage = 0.0;

  @override
  void initState() {
    super.initState();
    _pageController.addListener(() {
      setState(() {
        _currentPage = _pageController.page!;
      });
    });
  }

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('卡片堆叠效果')),
      body: Column(
        children: [
          Expanded(
            child: PageView.builder(
              controller: _pageController,
              itemCount: 5,
              itemBuilder: (context, index) {
                final double relativePosition = index - _currentPage;
                final double absPosition = relativePosition.abs();

                // 计算垂直偏移：非当前页面向下偏移
                final double verticalOffset = absPosition > 0.5 ? 20.0 : 0.0;

                // 计算缩放：当前页面最大，其他页面逐渐缩小
                final double scale = 1.0 - (absPosition * 0.1);

                return AnimatedBuilder(
                  animation: _pageController,
                  builder: (context, child) {
                    return Transform(
                      transform: Matrix4.identity()
                        ..translate(0.0, verticalOffset)
                        ..scale(scale),
                      alignment: Alignment.topCenter,
                      child: Container(
                        margin: EdgeInsets.symmetric(
                          vertical: 20 - verticalOffset,
                          horizontal: 10,
                        ),
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(16),
                          color: Colors.green[100 * (index % 9 + 1)],
                          boxShadow: [
                            BoxShadow(
                              color: Colors.black.withOpacity(
                                0.2 + absPosition * 0.1,
                              ),
                              blurRadius: 10 + (absPosition * 10),
                              offset: Offset(0, 5 + (absPosition * 5)),
                            ),
                          ],
                          border: Border.all(color: Colors.white, width: 2),
                        ),
                        child: Stack(
                          children: [
                            Positioned(
                              top: 20,
                              right: 20,
                              child: Container(
                                padding: EdgeInsets.all(8),
                                decoration: BoxDecoration(
                                  color: Colors.black.withOpacity(0.1),
                                  borderRadius: BorderRadius.circular(8),
                                ),
                                child: Text(
                                  '层 ${index + 1}',
                                  style: TextStyle(
                                    color: Colors.white,
                                    fontWeight: FontWeight.bold,
                                  ),
                                ),
                              ),
                            ),
                            Center(
                              child: Column(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  Text(
                                    '卡片 ${index + 1}',
                                    style: TextStyle(
                                      fontSize: 32,
                                      fontWeight: FontWeight.bold,
                                      color: Colors.white,
                                    ),
                                  ),
                                  SizedBox(height: 10),
                                  Text(
                                    '偏移: ${verticalOffset.toStringAsFixed(1)}\n缩放: ${scale.toStringAsFixed(2)}',
                                    textAlign: TextAlign.center,
                                    style: TextStyle(color: Colors.white70),
                                  ),
                                ],
                              ),
                            ),
                          ],
                        ),
                      ),
                    );
                  },
                );
              },
            ),
          ),
          // 指示器
          Container(
            height: 50,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: List.generate(5, (index) {
                return Container(
                  width: 8,
                  height: 8,
                  margin: EdgeInsets.symmetric(horizontal: 4),
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: (_currentPage.round() == index)
                        ? Colors.blue
                        : Colors.grey,
                  ),
                );
              }),
            ),
          ),
        ],
      ),
    );
  }
}
